
<template>
  <div>
    <div style="width: 100%;height: 200px;background-color: antiquewhite"  >
      <template v-for="msg in message">
        {{msg}}
      </template>
    </div>

    <div>
      <input type="text" v-model="text" placeholder="请输入你的消息">
      <button @click="sendMessage()">发送</button>
    </div>
  </div>
</template>

<script>
 let ws;
export default {
  data() {
    return {
      text:'',
      message:[],
      name:'李四',
    }
  },

  created() {
    this.websocket()
  },

  methods: {
    websocket () {
      ws = new WebSocket('ws://localhost:8083/webSocket/'+this.name);
      ws.onopen = () => {

      }

      ws.onmessage = evt => {
        var received_msg = evt.data;
        this.message.push(evt.data)
        console.log(received_msg);

      }
    },sendMessage(){
      ws.send(this.name+":"+this.text);
      this.text=""
    }
  }
}
</script>

<style scoped>

</style>

